<template>
  <div class="audition100">
    <h3>animation的属性有：</h3>
    <p>1. animation-name: 动画名</p>
    <p>2. animation-duration: 执行一次动画需要的时间</p>
    <p>3. animation-timing-function: 执行动画的运动节奏</p>
    <p>值有ease / ease-in / ease-out / ease-in-out / linear / step-start / step-end， </p>
    <p>cubic-bezier() / steps(4, end) / frames(10)...</p>
    <p>4. animation-delay: 动画延迟执行，默认0s</p>
    <p>5. animation-iteration-count: 动画执行次数，默认为1，即执行1次</p>
    <p>也可以是其他次数，或者无限次infinite</p>
    <p>6. animation-direction: 执行方向。</p>
    <p>值有 normal默认的正常方向 / reverse和默认方向相反 / alternate交替进行</p>
    <p>7. animation-fill-mode: 表示动画执行前后如何将使用样式</p>
    <p>值有：</p>
    <p>none: 默认。</p>
    <p>forwards: 执行到最后一帧是什么样，到结束后就保持什么样</p>
    <p>backwards: 直接执行第一帧的样式</p>
    <p>both: 执行forward和backwards两个属性</p>
    <p>8. animation-play-state: 定义一个动画是运行还是暂停。值有running / paused</p>
    <hr>
    <h3>transition的属性有：</h3>
    <p>1. transition-property: 指定动画的属性，可以是具体css属性，也可以是所有属性all</p>
    <p>2. transition-duration: 执行一次动画需要的时间</p>
    <p>3. transition-timing-function: 执行动画的运动节奏</p>
    <p>4. transition-delay: 动画延迟执行，默认0s</p>
    <p>试试把鼠标放在下面的盒子上，然后移开：</p>
    <div class="box">
      <div class="box1"></div>
    </div>
    <hr>
    <h3>animation和transition的区别：</h3>
    <p>1. 使用animation时，要用<span class="color">@keyframes定义动画名和动画过程</span>。而transition不需要</p>
    <p>2. animation属性更多，动画过程自定义，动画内容更丰富。transition是过渡动作，一般只有开始和结束的状态。</p>
    <p>3. transition一般在不同状态切换时使用，比如在:hover , :active或者js事件引起的状态变化，而animation没有状态切换的限制。</p>
    <p>4. animation一般结合类名使用</p>
  </div>
</template>

<script>
export default {
  name: 'Audition100'
}
</script>

<style lang="less" scoped>
.box {
  width: 200px;
  height: 60px;
  border: 1px solid #333;
  cursor: pointer;

  .box1 {
    width: 0%;
    height: 100%;
    background-color: pink;
    /* width变为0%的动画 */
    transition: width 1s;
  }

  &:hover {
    .box1 {
      width: 100%;
			/* width变为100%的动画 */
			transition: width 1s;
    }
  }
}
</style>